<script setup lang="ts">
// import { useRoute } from 'vue-router'
// const route = useRoute()
// console.log(route)
</script>

<template>
    <!-- <h1>APP 组件</h1>
    <van-button type="primary" text="按钮 --- 单标签" />
    <br />
    <van-button type="primary">按钮 --- 双标签</van-button>
    <span class="iconfont icon-shouye"></span>
    <span class="iconfont icon-fenlei"></span>
    <span class="iconfont icon-gouwuche"></span>
    <span class="iconfont icon-My"></span> -->

    <div class="container">
        <!-- 4个主页面的展示 -->
        <router-view></router-view>

        <!-- 底部导航 -->
        <!-- <footer class="footer" v-if="!route.meta.hidden"> -->
        <footer class="footer" v-if="!$route.meta.hidden">
            <router-link to="/">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </router-link>
            <router-link to="/kind">
                <span class="iconfont icon-fenlei"></span>
                <p>分类</p>
            </router-link>
            <router-link to="/cart">
                <span class="iconfont icon-gouwuche"></span>
                <p>购物车</p>
            </router-link>
            <router-link to="/my">
                <span class="iconfont icon-My"></span>
                <p>我的</p>
            </router-link>
        </footer>
    </div>
</template>

<style lang="scss">
html,
body,
#app,
.container {
    width: 100%;
    height: 100%;
}

html {
    font-size: 26.6666666666666vw;
    body {
        font-size: 14px;
    }

    .container {
        display: flex;
        flex-direction: column;
        .box {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;

            .header {
                width: 100%;
                height: 0.44rem;
                background-color: #f66;
                line-height: 0.44rem;
                text-align: center;
                color: white;
            }

            .content {
                overflow: auto;
            }
        }

        .footer {
            height: 0.5rem;
            border-top: 1px solid gray;
            display: flex;
            a {
                flex: 1;
                text-decoration: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-direction: column;
                color: black;
            }
            a.router-link-active {
                color: #f66;
            }
        }
    }
}
</style>
